Wisconsin HTML5 Map 3.0

We introduce a brand new map powered by JavaScript. This HTML5 interactive map is perfect for any business to visually represent your business geography: display local offices, dealers, reps, warehouses, stores, support centers etc. and to direct customers to an appropriate landing page on your website.

The map is suitable for displaying on any device including iPhone, iPad, Android and obviously on all major desktop browsers. The interactive map shows clickable areas* which you can assign a landing page URL with. Easily adjustable colors, links and popup balloons and other settings allow you to tune the map view to your needs.




The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map

Features

  • Best for real-estate, dealer maps, branch offices location and any geographical-related information
  • Responsive/static size of the interactive map
  • Popup tooltips to display detailed information on mouse over
  • Works with any mobile devices including iPhone, iPad, Android
  • Shows pinpoint markers
  • Simple visual customization of the map look
  • Wide customizing capabilities

What's new

Version 3.0

Version 3.0 features brand new online map editor. Now, you configure the map 100% visually and then simply copy JSON code to the settings.js file or download ready-made settings.js.

Install HTML5 Map

To install the map on your site, add the following code to the HTML source of the page:

<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="map.css" rel="stylesheet">
<script src="raphael.min.js"></script>
<script src="settings.js"></script>
<script src="paths.js"></script>
<script src="map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

Note that you should upload all files to your server first. Make sure you have specified the full path to the files in the code including subfolders. For example

<!-- start Fla-shop.com HTML5 Map -->
<div id='map-container'></div>
<link href="/directory/map.css" rel="stylesheet">
<script src="/directory/raphael.min.js"></script>
<script src="/directory/settings.js"></script>
<script src="/directory/paths.js"></script>
<script src="/directory/map.js"></script>
<script>
  var map = new FlaMap(map_cfg);
  map.drawOnDomReady('map-container');
</script>
<!-- end HTML5 Map -->

Visual editor

To change the map settings, you can use the online editor located at

After you set the map preferences, you can export the settings and download the settings.js file.
Don't forget to upload the updated settings.js back to your website.

You can also edit the settings.js file manually using any third-party text editor. We advise you to use free Notepad++ for Windows, or Sublime Text 3 for Windows, Mac, Linux.

Certainly, you can use any other HTML and plaintext editors as well.

Settings

Here is the list of map parameters you can change. The "Basic map settings" section specifies parameters of the entire map. The "Areas settings" parameters allow you to tune the view and behavior of a specific area (country, state, county, district and other geographic units).

Basic map settings

Parameter name Values Description
mapWidth 400 Map width in pixels. If 0 - map width will be 100% (responsive mode)
mapHeight 450 Map height. If width = 0 - will be ignored
shadowWidth 2 Shadow width
shadowOpacity 0.3 Shadow opacity
shadowColor "black" Shadow color. Can be in #rgb format
shadowX 1 Shadow offset by X coordinate
shadowY 2 Shadow offset by Y coordinate
iPhoneLink true/false If 'true' - the URL is opened immediately. Useful if you don't need to display a popup window.
If 'false' - the first tap displays a popup window for the selected area. The second tap opens the URL.
isNewWindow true/false Whether to open new links in a new window or in the current one
zoomEnable true/false Whether zoom capabilities are enabled or not
zoomEnableControls true/false Whether zoom controls are available or not
zoomMax 2
zoomStep 0.2 This setting is used by scroll zooming and zoomIn and zoomOut methods
borderColor Hex value The color of region's borders
borderColorOver Hex value Color of the border for active region
nameColor Hex value Name colors (used with short name)
nameFontSize 11px Short name font size
nameFontWeight bold/normal Short name boldness. Can be "normal" or "bold"
nameStroke true/false Whether short names should have stroke or not
overDelay secs Animation duration in milliseconds

Areas* settings

Parameter name Values Description
id number The id of a region. Must not be changed
name text The name of a region
shortname text The abbreviated name of a region
link text The landing page URL. May include JS code
comment HTML formatted text The text of the popup window. May include HTML formatting
image text The file name of the image to display in a popup
color_map Hex value The color of a region. Default color #7798BA
color_map_over Hex value The color of a region when the mouse cursor is over it. Default color #366CA3

The term "area" means one of the following: region, state, country, province, county or district, depending on the particular map


 

API specification

Version 2.0+ use new API with improved functions, you can find API description by following this link.

Fla-shop.com Licensing Information

  • Single Site License

Thank you for using our product. Please feel free to contact us with any questions regarding our product.

More maps and information on website Fla-shop.com